<template>
  <div>
      <ul>
          <li v-for="(v,i) in list" :key="i" @touchend="fun(v,i)" :class="{red:flag == i}">{{v}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
        flag:"",
        list:["推荐","百货","医药","食品","电器","手机","车品","内衣","男装","鞋包","水果","车品","家装","运动","美妆","家纺","女装","饰品","家具","母婴","电脑","玩乐","海淘"]
        }
    },
    methods: {
        fun(v,i){
            this.flag = i; 
        }
    },
}
</script>

<style scoped>
    ul{
        width:4rem;
        display: flex;
        overflow: scroll;
        margin: 0 auto;
        border-bottom:2px solid #fdfbfc;
    }
    ul li{
        width:0.55rem;
        height: 0.45rem;
        flex-shrink: 0;
        line-height: 0.45rem;
    }
    .red{
        color:red;
        position: relative;
    }
    .red::after{
        content:"";
        display: block;
        width:0.3rem;
        height: 0.02rem;
        position: absolute;
        bottom:0;
        left:0.01rem;
        background-color: red;
    }
</style>